<template>
    <div class="select-list-box">
        <tv-list
            class="select-title-box"
            ref="selectBoxRef"
            clipPadding="{ top: 127, left: 15, right: 15, bottom: 15 }"
            @item-focused="focusSelectFun"
            @item-click="focusClickFun"
            spanCount="3"
            clipChildren="false"
            clipToPadding="false"
            nextFocusName="{msgId:'selectListFocus',left:'self',right:'self',down:'self', up: 'self' }"
            endHintEnabled="false"
        >
            <tv-item
                type="09"
                :focusable="route.name === 'home' ? true : false"
                focusScale="1.04"
                class="one-image-tv-item"
            >
                <image-view
                    duplicateParentState
                    class="one-image"
                    src="${oneImageSrc}"
                />
                <div class="today-weather" v-if="showWeather">
                    <image-view
                        class="today-weather-skycon"
                        duplicateParentState
                        :src="todayWeather.skyconImg"
                    />
                    <image-view
                        class="location-icon"
                        duplicateParentState
                        src="assets/raw/image/location-icon.png"
                    />
                    <text-view class="location-area">{{ locationAreaName }}</text-view>
                    <text-view class="today-temp">{{
                        todayWeather.temperatureText
                    }}</text-view>
                    <text-view class="today-skycon-text">{{
                        todayWeather.skyconText
                    }}</text-view>
                    <text-view class="today-wind-text">{{
                        todayWeather.windText
                    }}</text-view>
                </div>
                <div class="other-day-wrap" v-if="showWeather">
                    <div
                        class="other-day-weather"
                        v-for="(item, index) in otherDayWeather"
                    >
                        <text-view
                            gravity="centerHorizontal|centerVertical"
                            class="day-text"
                            >{{ item.dayText }}</text-view
                        >
                        <image-view
                            class="other-weather-skycon"
                            duplicateParentState
                            :src="item.skyconImg"
                        />
                        <text-view
                            gravity="centerHorizontal|centerVertical"
                            class="day-temp"
                            >{{ item.temperatureText }}</text-view
                        >
                    </div>
                </div>
            </tv-item>
            <!-- 仅用作占位 -->
            <tv-item type="90"></tv-item>
            <tv-item
                type="10"
                :focusable="route.name === 'home' ? true : false"
                keyDelayTime="400"
                clipChildren="false"
                clipToPadding="false"
                focusScale="1.1"
                class="title-item-box"
            >
                <div class="title-item" duplicateParentState>
                    <div class="title-img-border"></div>
                    <image-view
                        duplicateParentState
                        class="title-img"
                        src="${contentImage}"
                    />
                </div>
            </tv-item>
            <!-- 直播节目 -->
            <tv-item
                type="11"
                :focusable="route.name === 'home' ? true : false"
                keyDelayTime="400"
                clipChildren="false"
                clipToPadding="false"
                focusScale="1.07"
                class="title-item-box"
            >
                <div class="title-item" duplicateParentState>
                    <div class="title-img-border"></div>
                    <image-view
                        duplicateParentState
                        class="title-img"
                        src="${contentImage}"
                    />
                    <div
                        class="title-nav"
                        :gradientBackground="gradientBackground"
                        duplicateParentState
                    >
                        <text-view
                            gravity="start|centerVertical"
                            class="title-time"
                            text="${phtvChineseInfo.startTimeText}"
                        ></text-view>
                        <text-view
                            gravity="start|centerVertical"
                            ellipsizeMode="3"
                            duplicateParentState
                            lines="1"
                            class="title-name"
                            text="${phtvChineseInfo.programName}"
                        >
                        </text-view>
                    </div>
                </div>
            </tv-item>
            <!-- 日程数据 -->
            <tv-item
                type="12"
                :focusable="route.name === 'home' ? true : false"
                keyDelayTime="400"
                clipChildren="false"
                clipToPadding="false"
                focusScale="1.07"
                class="title-item-box"
            >
                <div class="title-item" duplicateParentState>
                    <div class="title-img-border"></div>
                    <image-view
                        duplicateParentState
                        class="title-img"
                        src="${contentImage}"
                    />
                    <div
                        visible="${scheduleNowInfoVisible}"
                        class="title-nav-12"
                    >
                        <text-view
                            gravity="start|centerVertical"
                            class="title-time-12"
                            text="${scheduleNowInfo.timeValue}"
                        ></text-view>
                        <text-view
                            maxLines="2"
                            ellipsizeMode="2"
                            class="title-name-12"
                            text="${scheduleNowInfo.event}"
                        >
                        </text-view>
                    </div>
                    <div
                        class="title-nav-12"
                        visible="${noScheduleNowInfoVisible}"
                    >
                        <text-view
                            gravity="start|centerVertical"
                            class="title-not-12"
                            text="暂无日程"
                        ></text-view>
                    </div>
                </div>
            </tv-item>
            <!-- 轮播图 -->
            <div v-for="(item, index) in contentsAllList" :key="index">
                <tv-item
                    :type="`13${index}`"
                    :focusable="route.name === 'home' ? true : false"
                    keyDelayTime="400"
                    clipChildren="false"
                    clipToPadding="false"
                    focusScale="1.07"
                    class="title-item-box"
                    singleton
                >
                    <div class="title-item-13" duplicateParentState>
                        <swiper
                            class="topic-animation-swiper"
                            :ref="`animation_${index}`"
                            needAnimation
                            duplicateParentState
                        >
                            <swiper-slide
                                class="swiper-animation-slide"
                                v-for="(item, index) in contentsAllList[index]"
                                :key="index"
                                duplicateParentState
                            >
                                <div
                                    class="swiper-animation-box"
                                    duplicateParentState
                                >
                                    <image-view
                                        duplicateParentState
                                        class="swiper-animation-img"
                                        :src="item.contentImage"
                                    />
                                </div>
                            </swiper-slide>
                        </swiper>
                    </div>
                </tv-item>
            </div>
        </tv-list>
        <!-- <div class="center-more-cover" v-if="showMoreCover"></div> -->
        <div class="center-bottom-shadow" v-if="showMoreCover"></div>
    </div>
</template>
<script>
// import atlas from "@/atlas";
// import Store from "@/store";
export default {
    name: "HeadetBtn",
    props: ["route", "oneImageSrc", "showWeather", "todayWeather", "otherDayWeather", "locationAreaName"],
    data() {
        return {
            // 推荐位上焦下标
            focusSelectIndex: 0,
            selectList: [],
            // tabs标签渐变
            gradientBackground: {
                type: 0,
                shape: 0,
                colors: ["#00FFFFFF", "#FF000000"],
                cornerRadii4: [0, 0, 12, 12],
            },
            contentsAllIndex: 0,
            contentsAllList: [],
            animationTimer: null, // 轮播图动画定时器
            animationIntervalData: null, // 当前所有轮播图的数据
        };
    },
    mounted() {},
    computed: {
        showMoreCover() {
            return (
                this.selectList.length > 6 &&
                this.focusSelectIndex < this.selectList.length
            );
        },
        // 因为存在占位元素，实际落焦下标在selectList中的位置
        realFocusSelectIndex() {
            return this.focusSelectIndex - 3;
        }
    },
    methods: {
        updateTvList(list) {
            try {
                this.contentsAllIndex = 0;
                let newList = [];
                this.contentsAllList = [];
                this.animationIntervalData = null;
                this.clearAnimationInterval();
                for (let index = 0; index < list.length; index++) {
                    const element = list[index];
                    let newInfo = { ...element };
                    if (element.type === "13") {
                        if (!this.animationIntervalData)
                            this.animationIntervalData = {};
                        let animationInfo = {
                            timeInterval: Number(element.timeInterval),
                            currentSlideNum: 0,
                            timeCount: 0,
                            slideNum: element.contents.length,
                            isLastOver: false,
                        };
                        if (__IS_DEV__) {
                            animationInfo.timeInterval = 6;
                        }
                        const swiperSlideRef = `animation_${this.contentsAllIndex}`;
                        this.animationIntervalData[swiperSlideRef] =
                            animationInfo;
                        newInfo.type = `${element.type}${this.contentsAllIndex}`;
                        newInfo.swiperSlideRefName = swiperSlideRef;
                        this.contentsAllIndex += 1;
                        this.contentsAllList.push(element.contents);
                    }
                    newList.push(newInfo);
                }
                this.selectList = newList;
                this.$nextTick(() => {
                    console.log(
                        "updateTvList:selectList",
                        this.selectList,
                        this.animationIntervalData,
                        this.contentsAllList
                    );
                    this.$refs.selectBoxRef.setListData([{
                        type: '09',
                        oneImageSrc: this.oneImageSrc,
                    }, {
                        type: '90'
                    }, {
                        type: '90'
                    }, ...this.selectList]);
                    // this.$refs.selectBoxRef.setListData(this.selectList);
                    if (this.animationIntervalData) {
                        this.autoAnimationScroll();
                    }
                });
            } catch (error) {
                console.log("updateTvList", error);
            }
        },
        // 推荐位上焦
        focusSelectFun(evt) {
            console.log('centerSelectList focus:', evt);
            this.$emit("focusHistoryChange", "selectBoxRef");
            if (evt.position === 0) {
                // 上焦到大图
                this.$emit("oneImgFocusAction");
            }
            this.focusSelectIndex = evt.position;
        },
        // 推荐位点击
        focusClickFun() {
            if (this.focusSelectIndex === 0) {
                // 点击大图
                this.$emit("oneImgFocusClick")
                return;
            }
            let itemInfo = this.selectList[this.realFocusSelectIndex];
            console.log('centerItemClick', this.focusSelectIndex, this.realFocusSelectIndex);
            if (itemInfo.swiperSlideRefName) {
                const animationIData =
                    this.animationIntervalData[itemInfo.swiperSlideRefName];
                itemInfo =
                    itemInfo.contents[animationIData?.currentSlideNum || 0];
            }
            // if (itemInfo.isCanOpenSchedule) {
            //     Store.emit("goRouterLink", "schedule");
            //     return;
            // }
            this.$emit("topicsJump", itemInfo);
        },
        resetFocusSelect() {
            this.focusSelectIndex = 0;
        },
        compSetFocus(rowIndex) {
            console.log('centerSelectList:compSetFocus:', rowIndex)
            let focusIndex =
                rowIndex > -1
                    ? rowIndex
                    : this.focusSelectIndex > 0
                    ? this.focusSelectIndex
                    : 0;
            if (focusIndex === 1 || focusIndex === 2) {
                focusIndex = 0;
            }
            console.log('centerSelectList:focusIndex:', focusIndex)
            this.$refs.selectBoxRef.requestChildFocus(focusIndex);
        },
        updateItemSelectList(index, item) {
            // 因为存在占位元素，下标需要+3
            this.$refs.selectBoxRef?.updateItem(index + 3, item);
        },
        /**
         * 轮播图自动滚动
         * data：2024/05/20
         * author: wzl
         */
        autoAnimationScroll() {
            this.clearAnimationInterval();
            if (this.animationIntervalData) {
                this.animationTimer = setInterval(() => {
                    this.autoAnimationScrollAction();
                }, 1e3);
            }
        },
        /**
         * 清除定时器
         * data：2024/05/20
         * author: wzl
         */
        clearAnimationInterval() {
            try {
                if (this.animationTimer) {
                    clearInterval(this.animationTimer);
                    this.animationTimer = null;
                }
            } catch (error) {
                console.log("clearAnimationInterval:error", error);
            }
        },
        /**
         * 轮播图滚动曝光事件上报处理
         * data：2024/05/20
         * author: wzl
         */
        autoAnimationScrollAction() {
            try {
                for (const key in this.animationIntervalData) {
                    // 可视范围内才继续轮播
                    const element = this.animationIntervalData[key];
                    // timeInterval     ndms返回的轮播间隔时间
                    // timeCount        当前已经计时的秒数
                    // currentSlideNum  当前选中的轮播图key值
                    // slideNum         总共几张轮播图
                    // isLastOver       轮播曝光一轮后不再上报轮播事件
                    if (element.timeCount >= element.timeInterval) {
                        let currentSlideNum = element.currentSlideNum + 1;
                        let isLastOver = element.isLastOver;
                        if (currentSlideNum >= element.slideNum) {
                            currentSlideNum = 0;
                            isLastOver = true;
                        }
                        this.animationIntervalData[key] = {
                            ...this.animationIntervalData[key],
                            timeCount: 0,
                            currentSlideNum: currentSlideNum,
                            isLastOver: isLastOver,
                        };
                        this.$refs[key][0]?.setSlide(currentSlideNum);
                    } else {
                        this.animationIntervalData[key].timeCount =
                            element.timeCount + 1;
                    }
                }
            } catch (error) {
                console.log("autoAnimationScrollAction:error", error);
            }
        },
    },
};
</script>
<style lang="less" scoped>
.select-list-box {
    width: 1020px;
    height: 960px;
    background-color: transparent;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    .select-title-box {
        width: 1020px;
        height: 960px;
        background-color: transparent;
        .one-image-tv-item {
            width: 993px;
            height: 184px;
            radius: 12px;
            background-color: transparent;
            align-items: center;
            justify-content: flex-start;
            .one-image {
                position: absolute;
                left: 0;
                top: 0;
                background-color: transparent;;
                width: 960px;
                height: 174px;
                radius: 12px;
                focus-border-color: #ffffff;
                focus-border-width: 3px;
                focus-border-radius: 12px;
            }
        }
        .title-item-box {
            width: 333px;
            // width: 325px;
            height: 199px;
            align-items: center;
            justify-content: center;
            .title-item {
                position: relative;
                width: 308px;
                height: 177px;
                // padding-top: 4px;
                // padding-left: 4px;
                focus-background-image: url("assets/raw/image/topic-focus.webp");
                .title-img {
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    width: 300px;
                    height: 169px;
                    placeholder: 1;
                    radius: 12px;
                    // focus-border-color: #ffffff;
                    // focus-border-width: 4px;
                    // focus-border-radius: 12px;
                }
                .title-img-border {
                    width: 302px;
                    height: 171px;
                    background-color: transparent;
                    border-width: 1px;
                    border-color: rgba(255, 255, 255, 0.4);
                    focus-border-color: transparent;
                    border-radius: 12px;
                    position: absolute;
                    left: 3px;
                    top: 3px;
                }
                .title-nav {
                    margin-top: 104px;
                    margin-left: 4px;
                    width: 300px;
                    height: 68px;
                    // border-bottom-left-radius: 5px;
                    // border-bottom-right-radius: 5px;
                    // background-color: rgba(53, 53, 53, 0.60);
                    background-color: transparent;
                    .title-time {
                        margin-left: 10px;
                        width: 280px;
                        height: 28px;
                        font-size: 22px;
                        color: #ffffff;
                    }
                    .title-name {
                        margin-left: 10px;
                        width: 280px;
                        height: 28px;
                        font-size: 22px;
                        color: #ffffff;
                    }
                }
                .title-nav-12 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    margin-top: 25px;
                    width: 300px;
                    height: 84px;
                    // border-bottom-left-radius: 5px;
                    // border-bottom-right-radius: 5px;
                    // background-color: rgba(53, 53, 53, 0.60);
                    background-color: transparent;
                    flex-direction: row;
                    flex-wrap: wrap;
                    .title-not-12 {
                        margin-top: 30px;
                        margin-left: 140px;
                        width: 125px;
                        height: 46px;
                        font-size: 31px;
                        font-weight: bold;
                        color: #ffffff;
                    }
                    .title-time-12 {
                        margin-left: 127px;
                        width: 140px;
                        height: 28px;
                        font-size: 26px;
                        color: #ffffff;
                    }
                    .title-name-12 {
                        margin-top: 10px;
                        margin-left: 127px;
                        width: 140px;
                        height: 76px;
                        font-size: 31px;
                        font-weight: bold;
                        color: #ffffff;
                    }
                }
            }
            .title-item-13 {
                position: relative;
                overflow: hidden;
                .topic-animation-swiper {
                    // 宽高都要加上border的宽度8px
                    width: 308px;
                    height: 177px;
                    .swiper-animation-slide {
                        .swiper-animation-box {
                            .swiper-animation-img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                // 宽高都要加上border的宽度8px
                                width: 308px;
                                height: 177px;
                                focus-border-color: #ffffff;
                                focus-border-width: 4px;
                                focus-border-radius: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
    .center-more-cover {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 1065px;
        height: 67px;
        background-image: url("assets/raw/image/center_more_cover.png");
        background-size: 100% 100%;
        z-index: 99;
    }
    .center-bottom-shadow {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 1020px;
        height: 60px;
        background-image: url("assets/raw/image/center-bottom-shadow-bg.webp");
        background-size: 100% 100%;
        z-index: 99;
    }
    .today-weather {
        margin-top: 15px;
        margin-left: 30px;
        width: 280px;
        height: 174px;
        position: absolute;
        background-color: transparent;
        left: 1px;
        .today-weather-skycon {
            left: 16px;
            top: 18px;
            width: 136px;
            height: 136px;
            position: absolute;
        }
        .location-icon {
            width: 18px;
            height: 18px;
            position: absolute;
            left: 18px;
            top: 18px;
        }
        .location-area {
            position: absolute;
            left: 38px;
            top: 17px;
            width: 47px;
            height: 22px;
            font-size: 16px;
        }
        .today-temp {
            width: 150px;
            height: 39px;
            font-size: 28px;
            position: absolute;
            left: 150px;
            top: 42px;
        }
        .today-skycon-text {
            position: absolute;
            left: 150px;
            top: 76px;
            width: 80px;
            height: 20px;
            font-size: 14px;
        }
        .today-wind-text {
            position: absolute;
            left: 150px;
            top: 96px;
            width: 115px;
            height: 17px;
            font-size: 12px;
            opacity: 0.8;
        }
    }
    .other-day-wrap {
        width: 630px;
        height: 174px;
        position: absolute;
        left: 350px;
        align-items: center;
        flex-direction: row;
        background-color: transparent;
    }
    .other-day-weather {
        width: 99px;
        height: 142px;
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 0.16);
        z-index: 999;
        margin-right: 20px;
        .day-text {
            width: 99px;
            height: 29px;
            font-size: 21px;
            margin-top: 13px;
        }
        .other-weather-skycon {
            width: 84px;
            height: 84px;
            margin-top: -10px;
            margin-bottom: -10px;
            margin-left: 8px;
        }
        .day-temp {
            width: 99px;
            height: 29px;
            font-size: 21px;
            text-align: center;
        }
    }
}
</style>
